<template>
  <view class="box">
    <!-- 标题栏 -->
    <Header title="异常设备">
      <uv-icon name="arrow-left" :bold="true" size="20" color="#000" @click="goBack"></uv-icon>
    </Header>
    
    <!-- 异常警报列表 -->
    <view class="abnormal-list">
      <view class="abnormal-item" v-for="(item, index) in descristr" :key="index">
        <!-- 图片 -->
        <image :src="musicImages[index]" class="item-img"></image>
        
        <!-- 异常描述 -->
        <view class="item-desc" :style="{ color: index === 0 ? '#ff0000' : index === 1 ? '#ffdb65' : '#333' }">{{ descristr[index] }}</view>
        
        <!-- 异常时间 -->
        <view class="item-time">{{ descristr1[index] }}</view>
        
        <!-- 右箭头图标 -->
        <uv-icon name="arrow-right" color="#ebebeb" size="28" @click="goToPage(index)"></uv-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 导入图片资源
import img1 from '/static/imgs/eq_info.png';
import img2 from '/static/imgs/lixian.png';
// 导入uv-icon组件
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';
import Header from '@/components/AppHeader/Header.vue';

// 定义图片路径的响应式变量
const musicImages = ref([
  img1, // 异常设备图片1
  img2, // 异常设备图片2
]);
// 定义异常描述的响应式变量
const descristr = ref([
  '低电量报警',
  '离线',
]);
// 定义异常时间的响应式变量
const descristr1 = ref([
  '2024-01-20 20:20:20',
  '2024-01-20 20:20:20',
]);

const goBack = () => {
  uni.navigateBack();
};

const goToPage = (index) => {
  if (index === 0) {
    // 低电量报警跳转到 low 页面
    uni.navigateTo({
      url: './low'
    });
  } else if (index === 1) {
    // 离线跳转到 office 页面
    uni.navigateTo({
      url: './offline'
    });
  }
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  height: 100vh; /* 使.box 占据整个视口高度 */
  flex-direction: column;
}

.abnormal-list {
  width: 100%;
  flex: 1;
  background-color: #f0f0f0;
}

.abnormal-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  background-color: white;
  border-top: 2rpx solid #f0f0f0;
}

.item-img {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  margin-left: 10rpx;
}

.item-desc {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.item-time {
  font-size: 28rpx;
  color: #999;
  margin-right: 20rpx;
}

.footer {
  background-color: #f3f5f8; /* 设置背景颜色 */
  flex: 1;
}
</style>